<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/city_array.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.display1 {
				visibility: hidden;
			}
			
			.display2 {
				visibility: visible;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/global.css" />
		<link rel="stylesheet" type="text/css" href="css/layout.css" />
		<style type="text/css">

		</style>
		<script type="text/javascript">
		//省市联动开始
		window.onload = function() {
				var sheng = document.getElementById("sheng");
				for (var i = 0; i < cityArray.length; i++) {
					sheng.add(new Option(cityArray[i][0],i));
				}
			}

			function getShi(t) {
				if (t.selectedIndex > 0) {
				var arr = cityArray[t.value][1].split("|");
				var shi =document.getElementById("shi");
				shi.options.length=1;
				for (var i = 0; i < arr.length; i++) {
						shi.add(new Option(arr[i]));
					}
			}
			}
			function clearShi (t) {
			var shi=document.getElementById("shi");
			}
		
			var txt = document.getElementsByName("txt");
			var display = document.getElementById("display");
			var tishi = document.getElementsByName("tishi");
//省市联动结束
			function setInfo(t) {
				re1 = /^([A-z0-9_\.\-])+\@(([A-z0-9\-])+\.)+([A-z0-9]{2,4})+$/; //验证邮箱
				re3 = /^(?!\d+$)(?![A-z]+$)([A-z]|[0-9]){4,10}$/; //密码不能纯数字不能纯字母，4到10位
				switch (t) {
					case 1:
						if (re1.test(txt[0].value)) {
							return show(1);
						} else {
							txt[0].style.border = "1px solid red";
							tishi[0].className = "display2";
							return false;
						}
						break;
					case 2:
						if (txt[1].value == "") {
							txt[1].style.border = "1px solid red";
							tishi[1].className = "display2";
							return false;
						} else {
							return show(2);
						}
						break;
					case 3:
						if (re3.test(txt[2].value)) {
							return show(3);
						} else {
							txt[2].style.border = "1px solid red";
							tishi[2].className = "display2";
							return false;
						}
						break;
					case 4:
						if (txt[3].value == txt[2].value) {
							return show(4);
						} else {
							txt[3].style.border = "1px solid red"
							tishi[3].className = "display2"
							return false;
						}
				}
			}

			function show(t) {
				var display = document.getElementsByName("display");
				switch (t) {
					case 1:
						display[0].className = "display2"
						txt[0].style.border = "1px solid green";
						tishi[0].className = "display1";
						break;
					case 2:
						display[1].className = "display2"
						txt[1].style.border = "1px solid green";
						tishi[1].className = "display1";
						break;
					case 3:
						display[2].className = "display2"
						txt[2].style.border = "1px solid green";
						tishi[2].className = "display1";
						break;
					case 4:
						display[3].className = "display2"
						txt[3].style.border = "1px solid green";
						tishi[3].className = "display1";
						break;
				}
			}
		</script>
	</head>

	<body>
		<div id="header">
			<div id="register_header">
				<div class="register_header_left"><img src="images/logo.gif" alt="logo"></div>
				<div class="register_header_right"><a href="index.html" class="blue">首页</a> | <a href="product.html" class="blue">商品展示页</a> | <a href="shopping.html" class="blue">购物车</a> | <a href="login.html" class="blue">登录</a></div>
			</div>
		</div>
		<div id="main">
			<div class="register_content">
				<div class="register_top_bg"></div>
				<div class="register_mid_bg">
					<ul>
						<li class="register_mid_left">填写注册信息</li>
						<li class="register_mid_mid">2. 邮箱验证</li>
						<li class="register_mid_right">3. 完成注册</li>
					</ul>
				</div>
				<div class="register_top_bg_mid">
					<div class="register_top_bg_two_left"></div>
					<div class="register_top_bg_two_right"></div>
					<div class="register_title_bg"><img src="images/register_pic_02.gif" alt="欢迎注册"><br>您所提供的资料不会做其他用途，敬请安心填写。</div>
				</div>
				<div class="register_dotted_bg"></div>
				<div class="register_message">
					<form action="" method="post" id="myform">
						<dl class="register_row">
							<dt>Email地址：</dt>
							<dd>
								<input id="email" name="txt" type="text" onblur="setInfo(1)" class="register_input">
								<img class="display1" name="display" src="images/register_write_ok.gif" />
								<span class="display1" style="color: red;" name="tishi">请重新输入</span>
							</dd>
						</dl>
						<dl class="register_row">
							<dt>设置昵称：</dt>
							<dd>
								<input id="nickName" name="txt" type="text" onblur="setInfo(2)" class="register_input">
								<img class="display1" name="display" src="images/register_write_ok.gif" />
								<span class="display1" style="color: red;" name="tishi">请重新输入</span>
							</dd>
							<dd></dd>
						</dl>
						<dl class="register_row">
							<dt>设定密码：</dt>
							<dd>
								<input id="pwd" name="txt" type="password" onblur="setInfo(3)" class="register_input">
								<img class="display1" name="display" src="images/register_write_ok.gif" />
								<span class="display1" style="color: red;" name="tishi">密码由英文字母和数字组成的4-10位字符</span>
							</dd>
						</dl>
						<dl class="register_row">
							<dt>再输入一次密码：</dt>
							<dd><input id="repwd" name="txt" type="password" onblur="setInfo(4)" class="register_input">
								<img class="display1" name="display" src="images/register_write_ok.gif" />
								<span class="display1" style="color: red;" name="tishi">两次输入密码不一致</span>
							</dd>
						</dl>
						<dl class="register_row">
							<dt>性别：</dt>
							<dd><input name="sex" type="radio" value="男" checked="checked"> <label>男</label></dd>
							<dd> <input name="sex" type="radio" value="女"> <label>女</label></dd>
						</dl>
						<dl class="register_row">
							<dt>所在地区：</dt>
							<dd>
							<select id="sheng" onchange="getShi(this)"><option onchange="clearShi(this)" >请选择</option></select>省
							</dd>
							<dd>
								<select id="shi"><option value="" >请选择</option></select>市
							</dd>
						</dl>
						<div class="registerBtn"><input id="registerBtn" type="image" src="images/register_btn_out.gif"></div>
					</form>
				</div>

			</div>
		</div>
		<!--网站版权部分开始-->
		<div id="footer">
			<iframe src="footer.html" height="50px" width="900px" frameborder="0"></iframe>
		</div>
	</body>

</html>